import React, { useState } from "react";
import {
  View,
  StyleSheet,
  Image,
  Text,
  ScrollView,
  RefreshControl
} from "react-native";
import { colors } from "../Style/Colors";
import Options from "../Components/Options";
import Header from "../Components/Header";
import { setFontSize } from "../Components/SetSize";
import UserData from "../Data/UserData";

export const Dashboard = props => {
  const [refreshing, setRefreshing] = useState(false);

  const onOPD = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("OPD_TabBar");
    });
  };

  const onIPD = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("IPD_TabBar");
    });
  };

  const onDischarge = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("Discharge");
    });
  };

<<<<<<< HEAD
  const onSearch = () => {
    requestAnimationFrame(() => {
      props.navigation.navigate("Search");
    });
=======
  onSearch = () => {
    this.props.navigation.navigate("Search");
  };

  componentDidMount = async () => {
    try {
      const value = await AsyncStorage.getItem("user-data");
      if (value !== null) {
        const data = JSON.parse(value);
        this.setState({ data });
      } else {
        this.props.navigation.navigate("Auth");
      }
    } catch (error) {
      console.log("Error occured");
    }
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
  };

  const onRefresh = () => {
    setRefreshing(true);
    props.navigation.navigate("FetchData");
    setRefreshing(false);
  };

  const { data, opdList, dischargeList, ipdList, ipdCount } = UserData;
  return (
    <View styles={styles.container}>
      <Header text="DASHBOARD" isLogoutIcon={true} />
      <ScrollView
        refreshControl={
          <RefreshControl
            colors={[colors.primaryColor]}
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <View style={styles.profileContainer}>
          <View style={styles.profile}>
            <View>
              <Image
                style={styles.imgStyle}
                source={{
                  uri:
                    "http://www.teainconline.com/uploads/images/tea-male-avatar.jpg"
                }}
              />
            </View>
            <View style={styles.profileNameWrapper}>
              <Text style={styles.name}>
                {data.PRENM} {data.DRNAME}
              </Text>
              <Text style={styles.profession}>{data.QUALIFICATION}</Text>
              <Text style={styles.profession}>{data.DEPARTMENT}</Text>
            </View>
          </View>
          <View style={styles.ipdCountWrapper}>
            <Text style={styles.ipdText}>Total IPD </Text>
            <Text style={styles.ipdText}>{ipdCount}</Text>
          </View>
        </View>
        <View style={styles.dashboard}>
          <View style={styles.dashboardOptions}>
            <Options
              name="OPD"
              imgPath={require("../assets/OPD.png")}
              onClick={onOPD}
              no={opdList.length}
            />
            <Options
              name="IPD"
              imgPath={require("../assets/IPD.png")}
              onClick={onIPD}
              no={ipdList.length}
            />
          </View>
          <View style={styles.dashboardOptions}>
            <Options
              name="SEARCH"
<<<<<<< HEAD
              onClick={onSearch}
=======
              onClick={this.onSearch}
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
              imgPath={require("../assets/search.png")}
            />
            <Options
              name="DISCHARGE"
              onClick={onDischarge}
              imgPath={require("../assets/Discharge.png")}
              no={dischargeList.length}
            />
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between"
  },
  profileContainer: {
    backgroundColor: colors.primaryColor,
    padding: 4,
    marginBottom: 20,
    flex: 1
  },
  profile: {
    alignItems: "center",
    flexDirection: "row",
    paddingHorizontal: 10
  },
  ipdCountWrapper: {
    flexDirection: "row",
    justifyContent: "space-around",
    margin: 10
  },
  ipdText: {
    fontSize: 24,
    color: colors.whiteColor,
    fontWeight: "bold"
  },
  imgStyle: {
    width: 50,
    height: 50,
    borderRadius: 25
  },
  profileNameWrapper: {
    marginHorizontal: 10
  },
  name: {
    fontSize: setFontSize("2.8", "2.2"), //2.8 //2.4
    color: colors.whiteColor,
    marginVertical: 4
  },
  profession: {
    fontSize: setFontSize("2.4", "2"), //2.6 //2.2
    color: colors.whiteColor,
    marginVertical: 4
  },
  dashboard: {
    justifyContent: "center",
    alignItems: "center",
    flex: 1
  },
  dashboardOptions: {
    flexDirection: "row"
  }
});

export default Dashboard;
